<template>
  <page-view class="movie">
    <m-header>
     <div slot="body">猫眼电影</div> 
    </m-header>
    <ul class="topNav">
      <li @click="$router.push({name:'City'})">武汉</li>
      <li :class="[pageType==0?'active':null]" class="movies"  @click="pageType=0">正在上映</li>
      <li :class="[pageType==1?'active':null]" class="movies" @click="pageType=1">即将上映</li>
      <li>搜索</li>
    </ul>
    <div class="navBorder">
      <div :class="[pageType==1?'active':null]"></div>
    </div>
    <div class="content">
      <swiper :options="swiperOption" ref="mySwiper" class="movieSwiper">
        <swiper-slide class="swiperSlide">
            <hot></hot>
        </swiper-slide>
        <swiper-slide class="swiperSlide">
          <coming></coming>
        </swiper-slide>
      </swiper>
    </div>
  </page-view>
</template>
<script>
import MHeader from "../components/MHeader.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import Hot from "../components/Hot.vue"
import Coming from "../components/Coming.vue"
export default {
  name: "Movie",
  data() {
    return {
        pageType: 0
    };
  },
  watch:{
      pageType(newValue){
          this.swiper.slideTo(newValue);
      }
  },
  computed: {
    swiperOption() {
        let that=this;
        return {
            on:{
                slideChange(){
                    that.pageType=this.activeIndex;
                }
            }
        }
    },
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  components: {
    MHeader,
    swiper,
    swiperSlide,
    Hot,
    Coming
  }
};
</script>
<style lang="scss" scoped>
.movie{
    display: flex;
    flex-direction: column;
}
.topNav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 0.8rem;
  > li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    &.active {
      color: var(--pColor);
    }
  }
}
.navBorder {
  height: 2px;
  background: #ececec;
  > div {
    width: 25%;
    height: 100%;
    background: var(--pColor);
    transition: all 0.2s linear;
    transform: translateX(100%);
    &.active {
      transform: translateX(200%);
    }
  }
}
.content {
    flex: 1;
    overflow: auto;
    .movieSwiper {
      height: 100%;
      .swiperSlide {
        height: 100%;
        overflow: auto;
      }
    }
  }
</style>